<template>
  <!-- 医院科室 -->
  <div class="Re_depart_comp">
    <header>
      <router-link to='/Register'>
         <img  class="Re_deppart_back" src="../../../static/imgs/return.png">
      </router-link>
      <p>科室</p>
    </header>

    <main>
      <!-- 左侧科室分类 -->
      <section class="deppartLeft">
        <ul>
          <li :class='{active: activeIndex == i}' @click='select(f, i)' v-for='f,i in subject'>
            <p>{{f.name}}</p>
          </li>
        </ul>
      </section>
      <!-- 右侧科室列表 -->
      <section class="deppartRight">
        <div class="deppartItem" v-for='x,index in deppartList'>
          <!-- <p @click='dian(x)'>{{x.infos}}</p> -->
          <router-link tag='p' 
          :to='{name:"Register",params:{dataid:x.name,text:x.infos}}'>
            {{x.infos}}
          </router-link>
        </div>
      </section>
    </main>
  </div>
</template>


<script>
  export default {
    name:'Re_depart_comp',
    data:function(){
      return {
        subject:[
          {id:"qita", name:'其他'},
          {id:"fuke", name:'妇科'},
          {id:"waike", name:'外科'},
          {id:"neike", name:'内科'}
        ],
        activeIndex: 0,
        activeData: {},
        deppartList: []
      }
    },
    methods:{
     
      select(data, index){
        this.activeData = data;
        this.activeIndex = index;
        this.$router.push({
          name: "Re_depart_comp",
          params: {
            dataid: data.id
          }
        })
        this.getData(data.id);
      },
      getData(dataid){
         console.log(this.$route.params.dataid)
        this.$axios.get('http://127.0.0.1:9999/message', {
            params: {
               dataid: this.$route.params.dataid
              //dataid: dataid
            }
          }).then(o=>{
            this.deppartList = o.data;
          });
      }
    }
    ,
    created () {
      this.getData(this.$route.params.dataid);
     // console.log(this.$route.params.text);
    } 
  }
</script>
<style scoped lang='less'>

.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-right,@right);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .px2rem(height,88);
    .px2rem(font-size,40);
    .Flex;
    position: fixed;
    width:100%;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .px2rem(width,55);
        .px2rem(height,53);
      }
}
html,body{
   /*width:100%;
   height:100%;*/
   
}
main{
  .Flex;
  height:100%;
  .padding-top(88);
  .font-size(30);
  .deppartLeft{
    width:30%; 
    li{
      border-bottom: 1px solid #ccc;
      background:#f0f2f5;
      .padding(20,0,20,20);
      &.active{
        background:#ffffff;
      }
    }
  }
  .deppartRight{
    width:70%;
    background:#ffffff;
    height:100%;
    .deppartItem{
      .padding(20,0,20,20);
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
